@import '..\\..\\assets\\styles\\style';

page {
  box-sizing: border-box;
  padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx);
}

.t-tabs.t-tabs--top .t-tabs__scroll {
  border-bottom: none !important;
}

.home-page-container {
  background: #f5f5f5;
}

.home-page-container,
.home-page-header {
  display: block;
  padding: 0 24rpx;
}

.home-page-header .t-search__input-container {
  border-radius: 32rpx !important;
  height: 64rpx !important;
}

.home-page-header .t-search__input {
  font-size: 28rpx !important;
  color: rgb(116, 116, 116) !important;
}

.home-page-header .swiper-wrap {
  margin-top: 20rpx;
}

.home-page-header .t-image__swiper {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
}

.home-page-container .t-tabs {
  background: #f5f5f5 !important;
}

.home-page-container .t-tabs .t-tabs-nav {
  background-color: transparent;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #333;
}

.home-page-container .t-tabs .t-tabs-scroll {
  border: none !important;
}

/* 半个字 */
.home-page-container .tab.order-nav .order-nav-item.scroll-width {
  min-width: 165rpx;
}

.home-page-container .tab .order-nav-item.active {
  color: #fa550f !important;
}

.home-page-container .tab .bottom-line {
  border-radius: 4rpx;
}

.home-page-container .tab .order-nav-item.active .bottom-line {
  background-color: #fa550f !important;
}

.home-page-container .tabs-external__item {
  /* color: #666 !important; */
  font-size: 28rpx;
}

.home-page-container .tabs-external__active {
  color: #333333 !important;
  font-size: 32rpx;
}

.home-page-container .tabs-external__track {
  /* background-color: #fa4126 !important; */
  height: 6rpx !important;
  border-radius: 4rpx !important;
  width: 48rpx !important;
}

.t-tabs.t-tabs--top .t-tabs__item,
.t-tabs.t-tabs--bottom .t-tabs__item {
  height: 86rpx !important;
}

.home-page-container .goods-list-container {
  background: #f5f5f5 !important;
  margin-top: 16rpx;
}

.home-page-tabs {
  --td-tab-nav-bg-color: transparent;
  --td-tab-border-color: transparent;
  --td-tab-item-color: #666;
  --td-tab-track-color: red;
}

.header-bg {
  width: 100vw;
  height: 470rpx;
  background: linear-gradient(180deg, rgba(66, 196, 109, 1) 0%, rgba(159, 229, 183, 0.4315) 57%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.home-page-header {

  position: relative;


  .header-address {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 36rpx;
    color: #1e1e1e;
    font-weight: 700;

    .icon-location {
      width: 36rpx;
      height: 36rpx;

    }
  }


}

.home-page-container {
  background: transparent;

  .market-con {
    @include flex-center-between;
    margin-bottom: 20rpx;

    .market-info {
      display: flex;
      align-items: flex-end;
      color: $color-1e;
      font-size: 32rpx;

      .status {
        font-size: 28rpx;

        &.suc {
          color: $color-success;
        }

        &.danger {
          color: $color-red;
        }
      }

      .open-time {
        font-size: 24rpx;
        color: $color-primary;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 20rpx 20rpx 20rpx 0rpx;
        padding: 6rpx 14rpx;
        margin-left: 12rpx;
      }
    }

    .market-name {
      @include flex-column-center;
      font-size: 28rpx;
      color: $color-mainText;
      padding: 8rpx 24rpx;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 28rpx;

      .title {
        padding-right: 8rpx;
      }
    }
  }

  .classify-content {
    padding-top: 18rpx;

    .classify-item {
      margin-bottom: 40rpx;
      @include flex-column-center;
      flex-direction: column;

      .img {
        width: 96rpx;
        height: 96rpx;
      }

      .text {
        font-size: 24rpx;
        color: $color-mainText;
      }
    }
  }

  .pop-container {
    position: relative;

    .market-list {
      height: 680rpx;
      font-size: 28rpx;
      color: $color-subText;
      overflow: auto;

      .market-item {
        border-bottom: 2rpx solid $color-f5;
        padding: 32rpx 24rpx;
        @include flex-center-between;

        &.active {
          background: $color-f5
        }

        .market-info {
          .market-name {
            @include flex-column-center;
            font-size: 32rpx;
            color: $color-3d;
            margin-bottom: 8rpx;

            .status {
              padding: 6rpx 14rpx;
              font-size: 24rpx;
              border-radius: 24rpx;
              margin-right: 12rpx;

              &.suc {
                color: $color-greenText;
                background: $color-bg-suc;
              }

              &.warn {
                color: $color-yellow;
                background: $color-bg-warn;
              }

              &.info {
                color: $color-blue;
                background: $color-bg-info;
              }
            }
          }

        }

        .close-tip {
          color: $color-red;
          position: relative;
          font-size: 24rpx;

          &::before {
            content: '';
            display: block;
            height: 12rpx;
            width: 12rpx;
            border-radius: 50%;
            background: $color-red;
            position: absolute;
            top: 12rpx;
            left: -24rpx;
          }
        }

        .market-distance {
          @include flex-center-between;
        }
      }
    }


  }
}

.empty-con {
  @include flex-column-center;
  flex-direction: column;
  padding-top: 150rpx;

  .img {
    width: 332rpx;
    height: 254rpx;
    margin-bottom: 32rpx;
  }

  .empty-tip {
    color: $color-subText;
    font-size: 28rpx;
    line-height: 40rpx;
  }

  .change-btn {
    @include flex-center-center;
    color: $color-greenText;
    margin-top: 24rpx;
    font-size: 28rpx;
    line-height: 40rpx;
  }
}